<template>
	<view class="index">
		<view class="top">
		  <text>九一法律</text>
		  <view>
		    <text class="toptext">专业的在线法律咨询平台</text>
		    <text class="toptext1">PROFESSIONAL ONLINE LEGAL ADVICE</text>
		  </view>
		  <view class="topbtn" @click="search">
				<image src="../../static/路径@1x.png" mode="" class="image1"></image>
				<text>搜一搜: 律师、问答、问题</text>
			</view>
		</view>
		<four-button></four-button>
		<view style="height: 12rpx; background-color: #EDEDED;"></view>
		<handpick></handpick>
		<view style="height: 12rpx; background-color: #EDEDED;"></view>
		<view class="attorney">
			<view class="attorney-view" v-for="item in list" :key="item.id">
				<image :src="item.image" mode="" style="width: 84rpx; height: 84rpx;" @click="lssy(item)"></image>
				<image class="attorney-view-img" src="../../static/分组 4@1x.png" mode="" style="width: 20rpx; height: 20rpx;"></image>
				<view class="attorney-view-view1">
					<a href="">{{item.name}} <text style="font-size: 20rpx;">律师</text></a>
					<text style="color: #28B326;">执业9年</text>
				</view>
			</view>
		</view>
		<view class="answer">
			<view class="answer-top" @click="lsjd">
				<text>律师解答</text>
				<view class="answer-top-right">
					<text>更多</text>
					<image class="answer-top-right-image" src="../../static/箭头@1x.png" mode="" style="width: 28rpx; height: 28rpx;"></image>
				</view>
			</view>
			<view class="answer-content" v-for="item in 3">
				<view class="answer-content-view" style="height: 262rpx; width: 694rpx; margin: 24rpx 0 0 28rpx;">
					<view class="text1">我上了九天半的班，法定假日我请假他不准，然后把我 辞退了，结工资的时候多转5...</view>
					<view class="answer-content-center">
						<view class="answer-content-center-photo">
							<image src="../../static/首页路径.png" mode="" style="width: 80rpx; height: 80rpx;"></image>
							<image class="image2" src="../../static/分组 4@1x.png" mode="" style="width: 20rpx; height: 20rpx;"></image>
						</view>
						<view class="answer-content-center-view">
							<view class="answer-content-center-text">
								<a href="" style="color: #616C9A;">彭梓芳<text style="font-size: 22rpx; color: #383838;">律师</text></a>
							</view>
							<text style="color: #A6A6A6;">05-01 13:00</text>
						</view>
					</view>
					<text style="font-size: 28rpx;font-weight: normal;line-height: 32rpx;">如果仅供自己学习参考就不违法，传播就违法</text>
					<view class="answer-content-footer">
						<view class="answer-content-footer-view">
							<image src="../../static/画板 2@1x.png" mode="" style="width: 120rpx; height: 24rpx;"></image>
							非常感谢
						</view>
						<text style="color: #CF1915;">感谢8元</text>
					</view>
				</view>
			</view>
			<view class="topimg" style="width: 750rpx; height: 174rpx;">
				<image class="user-botimg" src="../../static/并集@1x.png" mode=""></image>
			</view>
		</view>
	</view>
	<fourbar></fourbar>
</template>

<script>
	import { index, getNowCheck } from '../../utils/utils';
	export default {
		data() {
			return {
				ref: 4,
				list: [], // 中间的律师
			};
		},
		onLoad() {
			index((res) => {
				console.log('首页index',res);
			})
			getNowCheck((a) => {
				// console.log('认证状态', a);
				this.list.push(a.data.data)
				// console.log(this.list);
			})
			let arr = {
				lawyer: '1',
				keyword: '',
				page: '1',
			}
		},
		methods: {
			// 跳转到律师主页
			lssy (i) {
				console.log(i);
				uni.navigateTo({
					url: `/pages/Attorney side/lawyerHome/lawyerHome?id=${i.id}`,
				})
			},
			// 跳转到搜索页
			search () {
				uni.navigateTo({
					url: "/pages/Attorney side/search/search"
				})
			},
			// 律师解答
			lsjd () {
				uni.navigateTo({
					url: "/pages/Attorney side/lsjdPage/lsjdPage"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/* pages/home/index.wxss */
	.index {
		height: 100vh;
	}
	.top {
	  width: 750rpx;
	  height: 400rpx;
	  background-color: #384B85;
	}
	.top > text {
	  position: absolute;
	  left: 28rpx;
	  top: 110rpx;
	  width: 136rpx;
	  height: 46rpx;
	  opacity: 1;
	  font-size: 32rpx;
	  font-weight: normal;
	  line-height: 46rpx;
	  letter-spacing: 2rpx;
	  color: #FFFFFF;
	}
	.toptext {
	  position: absolute;
	  left: 146rpx;
	  top: 204rpx;
	  width: 462rpx;
	  height: 2rpx;
	  opacity: 1;
	  font-size: 40rpx;
	  font-weight: bold;
	  line-height: 0rpx;
	  text-align: center;
	  letter-spacing: 2rpx;
	  color: #FFFFFF;
	  text-shadow: 0rpx 2rpx 2rpx rgba(0, 0, 0, 0.4);
	}
	.toptext1 {
	  position: absolute;
	  left: 179rpx;
	  top: 242rpx;
	  width: 404rpx;
	  height: 22rpx;
	  opacity: 1;
	  font-size: 18rpx;
	  font-weight: normal;
	  line-height: 22rpx;
	  text-align: center;
	  text-transform: uppercase;
	  letter-spacing: 2rpx;
	  color: rgba(255, 255, 255, 0.9);
	}
	.topbtn {
	  position: absolute;
		display: flex;
		text-align: center;
		align-items: center;
	  left: 40rpx;
	  top: 296rpx;
	  width: 672rpx;
	  height: 64rpx;
	  border-radius: 32rpx;
	  opacity: 1;
	  background: rgba(255, 255, 255, 0.2);
	}
	.image1 {
		width: 32rpx;
		height: 32rpx;
		margin: 4rpx 8rpx 0 32rpx;
	}
	.topbtn > text {
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32rpx;
		text-align: center;
		letter-spacing: 0rpx;
		color: rgba(255, 255, 255, 0.6);
	}
	.attorney {
		width: 750rpx;
		height: 220rpx;
		margin: 16rpx 0 16rpx 16rpx;
		display: flex;
	}
	.attorney-view {
		width: 176rpx;
		height: 220rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 16rpx;
		background: #EDF3FA;
		border-radius: 8px;
	}
	.attorney-view-img {
		position: relative;
		top: -20rpx;
		left: 30rpx;
	}
	.attorney-view-view1 {
		font-size: 20rpx;
		font-weight: normal;
		line-height: 24rpx;
		text-align: center;
		letter-spacing: 0rpx;
		color: #383838;
	}
	.answer {
		width: 750rpx;
		height: 1056rpx;
	}
	.answer-top {
		height: 82rpx;
		width: 720rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
		text-align: center;
		color: #383838;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 20rpx;
	}
	.answer-top-right {
		width: 80rpx; 
		margin-right: 28rpx;
		font-size: 26rpx;
		font-weight: normal;
		line-height: 30rpx;
		text-align: center;
		letter-spacing: 0rpx;
		color: #C9C9C9;
	}
	.answer-top-right > image {
		position: relative;
		top: 4rpx;
		right: 8rpx;
	}
	.answer-content {
		width: 750rpx;
		height: 302rpx;
		border-bottom: solid 2rpx #F0F0F0;
	}
	.answer-content-view > .text1 {
		width: 694rpx;
		height: 72rpx;
		line-clamp: 2;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
	}
	.answer-content-center {
		display: flex;
		margin-bottom: 16rpx;
	}
	.answer-content-center-photo {
		width: 100rpx;
		height: 80rpx;
	}
	.answer-content-center-photo > .image2 {
		position: relative;
		left: -14rpx;
		bottom: 4rpx;
	}
	.answer-content-center-text {
		width: 140rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: normal;
		display: flex;
		justify-content: space-between;
	}
	.answer-content-center-view {
		font-size: 24rpx;
	}
	.answer-content-footer {
		width: 672rpx;
		height: 32rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		font-size: 24rpx;
	}
	
	.user-botimg {
		width: 440rpx; 
		height: 76rpx;
		margin: 60rpx 0 0 156rpx;
	} 
</style>
